<template>
    <div class="screenbody">

        <transition-group name="list" tag="div" class="transitionbox" enter-active-class="animated bounceInDown" leave-active-class="animated zoomOutDown">
            <screen1 ref="screen1" key="1" v-if="createdSc['1']" v-show="nowScreen==1"></screen1>
            <screen2 ref="screen2" key="2" v-if="createdSc['2']" v-show="nowScreen==2"></screen2>
            <screen3 ref="screen3" key="3" v-if="createdSc['3']" v-show="nowScreen==3"></screen3>
            <screen4 ref="screen4" key="4" v-if="createdSc['4']" v-show="nowScreen==4"></screen4>
        </transition-group>
    </div>
</template>

<script>
    import screen1 from './screen1'
    import screen2 from './screen2'
    import screen3 from './screen3'
    import screen4 from './screen4'

    export default {
        name: "screenbody",
        components:{
            screen1,screen2,screen3,screen4
        },
        data(){
            return {
                timer:null, //滚屏定时器
                timer2:null,    //刷新定时器
                nowScreen:1,
                titles:{
                    '1':'呼叫中心监控',
                    '2':'技能队列监控',
                    '3':'来电区域监控',
                    '4':'在线客服监控',
                },
                createdSc:{},
                scrollScreenTime:8000,  //滚屏时间间隔
                freshScreenTime:20000    //刷新时间间隔
            }
        },
        created(){
            this.createdSc[this.nowScreen] = true;
            this.$emit('changeTitle',this.titles[this.nowScreen]);
            this.timer = setInterval(()=>{
                if(this.nowScreen == 4){
                    this.nowScreen = 1;
                }else{
                    this.nowScreen ++;
                }
                this.createdSc[this.nowScreen] = true;
                this.$emit('changeTitle',this.titles[this.nowScreen]);
            },this.scrollScreenTime)
        },
        mounted(){
            this.timer2 = setInterval(()=>{
                console.log(this.$refs)
                for(let sc in this.$refs){
                    if(sc.indexOf('screen')>-1){
                        this.$refs[sc].refreshThisSc.call(this.$refs[sc])
                    }
                }
            },this.freshScreenTime)
        }
    }
</script>

<style lang="less" scoped>
    .screenbody{
        position: absolute;
        height: calc(100% - 170px);
        width: calc(100% - 92px);
        top: 126px;
        left: 46px;
        display: flex;
        justify-content: space-between;
        .transitionbox{
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
        .screen{
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            display: flex;
        }
        .list-item {
            display: inline-block;
            margin-right: 10px;
        }
    }
</style>
